<template>
	<Popup height="520rpx">
		<view class="content">
			<view class="head">
				<view class="title">物料类型选择
				</view>
				<view class="cancel" @click="saveMaterialType(0)">
					取消
				</view>
			</view>
			<scroll-view scroll-y class="radio-box">
				<RadioComp class="item" :info="item" id='id' name='name' :nowId="nowType.id"
					v-for="item in materialTypeList" :key="item.id" @click="changeMaterialType(item)" />
			</scroll-view>

			<Button3 class="save-btn" @click="saveMaterialType(1)">确定</Button3>
		</view>
	</Popup>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import Popup from '@/components/popup/popup.vue';
	import RadioComp from '@/components/radioComp/radioComp.vue';
	import Button3 from '@/components/button3/button3.vue';
	const emits = defineEmits(['saveMaterialType'])
	const props = defineProps({

		typeList: {
			type: Array,
			default: () => [],
		}
	})
	const materialTypeList = ref(props.typeList)
	// 当前物料类型
	const nowType = ref(materialTypeList.value[0])
	// 改变物料类型
	const changeMaterialType = (item) => {
		nowType.value = item
	}
	// 保存物料类型
	const saveMaterialType = (type) => {
		if (type == 1) {
			emits('saveMaterialType', nowType.value)
		} else {
			emits('saveMaterialType')
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 48rpx 32rpx 68rpx;

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 42rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}


		.radio-box {
			height: 240rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-bottom: 30rpx;

			.item {
				margin-bottom: 24rpx;
				min-width: 166rpx;
			}
		}
	}
</style>